<template>
  <el-autocomplete
      class="inline-input"
      v-model="state"
      @input="loadAll"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
      :highlight-first-item="true"
  ></el-autocomplete>
</template>
<script>
import Vue from 'vue'

export default {
  name: 'test',
  data() {
    return {
      restaurants: [],
      state: '',
      selectObj: {}
    };
  },
  methods: {
    querySearch(queryString, cb) {
      const restaurants = this.restaurants;
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    async loadAll() {
      if (this.state !== '' && this.state !== null) {
        const {data: res} = await this.$http.get('/programmer/search/' + this.state + '/1/10')
        this.restaurants = res.content
        for (let i = 0; i < this.restaurants.length; i++) {
          Vue.set(this.restaurants[i], "value", this.restaurants[i].career + this.restaurants[i].company + this.restaurants[i].name)
        }

      }
    },
    handleSelect(item) {
      this.selectObj = item
    }
  },
  mounted() {
    this.loadAll()
  }
}
</script>
<style scoped>

</style>